<template>
  <div class="userfile-container">
    <!-- 顶部导航 -->
    <van-nav-bar
      title="个人信息"
      left-arrow
      class="page-nav-bar"
      @click-left="$router.back()"
    />
    <input
     type="file" 
     hidden 
     ref="file" 
     @change="onFileChange" />
    <!-- 内容区域 -->
    <van-cell
      title="头像"
      is-link
      class="photo-cell"
      @click="$refs.file.click()"
    >
      <template #default>
        <van-image
         class="avatar" 
         round 
         fit="cover" 
         :src="img" />
      </template>
    </van-cell>
    <van-cell
      title="昵称"
      is-link
      :value="userInfo.name"
      @click="isNameShow = true"
    />
    <van-cell
      title="性别"
      is-link
      :value="userInfo.gender === 0 ? '男' : '女'"
      @click="isGenderShow = true"
    />
    <van-cell
      title="生日"
      is-link
      :value="userInfo.birthday"
      @click="isBirthdayShow = true"
    />

    <!-- 弹出层 -->
    <!-- 头像 -->
    <van-popup
      v-model="isPhotoShow"
      position="bottom"
      :style="{ height: '100%' }"
    >
      <avatar-edit
        v-if="isPhotoShow"
        :imgFile="img"
        @close="isPhotoShow = false"
        :avatar.sync="userInfo.photo"
      ></avatar-edit>
    </van-popup>

    <!-- 编辑昵称 -->
    <van-popup
     v-model="isNameShow" 
     style="height: 30%" 
     position="bottom">
      <userNameEdit
       v-if="isNameShow" 
       @close="isNameShow=false" 
       v-model="userInfo.name"></userNameEdit>
    </van-popup>

    <!-- 性别 -->
    <van-popup
      v-model="isGenderShow"
      position="bottom"
      :style="{ height: '30%' }"
    >
      <genderEdit
        @close="isGenderShow = false"
        :gender.sync="userInfo.gender"
      ></genderEdit>
    </van-popup>

    <!-- 生日 -->
    <van-popup
      v-model="isBirthdayShow"
      position="bottom"
      :style="{ height: '30%' }"
    >
      <birthdayEdit
        @close="isBirthdayShow = false"
        :birthday.sync="userInfo.birthday"
      ></birthdayEdit>
    </van-popup>
  </div>
</template>

<script>
import { getUserProfileAPI } from '@/api';
import AvatarEdit from './components/avatarEdit.vue';
import GenderEdit from './components/genderEdit.vue';
import BirthdayEdit from './components/birthdayEdit.vue';
import UserNameEdit from './components/userNameEdit.vue';
export default {
  components: {
    AvatarEdit,
    GenderEdit,
    BirthdayEdit,
    UserNameEdit
  },
  data () {
    return {
      userInfo: {},//个人信息
      isPhotoShow: false,
      isNameShow: false,
      isGenderShow: false,
      isBirthdayShow: false,
      img: null
    }
  },
  created () {
    this.loadGetUserProfile()
  },
  methods: {
    // 上传图片完成后
    onFileChange () {
      // 将输入框中的图片存储到数据中心
      // 1. 获取文件对象
      const file = this.$refs.file.files[0]
      // 2. 基于文件对象转换为blob数据
      this.img = window.URL.createObjectURL(file)
      // 3. 每次获取完成图片后要清空文件上传框中的数据
      this.$refs.file.value = ''

      // 开启弹框
      this.isPhotoShow = true
    },

    // 获取用户个人资料
    async loadGetUserProfile () {
      try {
        const { data } = await getUserProfileAPI()
        this.userInfo = data.data
        console.log(this.userInfo, 'userInfo')
      } catch (error) {
        console.log('获取数据失败',error)
      }
    }
  }
}
</script>

<style scoped lang="less">
.userfile-container {
  .photo-cell {
    align-items: center;

    .avatar {
      width: 80px;
      height: 80px;
    }

    .van-cell__value {
      display: flex;
      flex-direction: row-reverse;
    }
  }
}
</style>